<template>
  <!-- 
    1. siderbar 开始拖拽 onDragStart
    2. onDragStart -> document.addEventListener('drop', onDragEnd)
    3. VueFlow -> @dragover="onDragOver" @dragleave="onDragLeave"
    4. 外层 div 绑定 drop -> onDragEnd \ onDrop
    5. onDragEnd -> document.removeEventListener('drop', onDragEnd)
    6. onDrop -> 创建新节点
  -->
  <div style="height: 78vh">
    <h3 style="text-align: center;">
      请拖拽节点
    </h3>

    <div class="tag">开始和结束</div>
    <div class="selectable-nodes grid-container">
      <div v-for="(node, idx) in selecteableNodes.startAndEnd" :key="idx">
        <div 
          :class="`vue-flow__node-${node.type}`" 
          :draggable="true" 
          @dragstart="onDragStart($event, node.type, node.name)"
        >
          {{ node.label }}
        </div>
      </div>
    </div>

    <div class="tag">标准流程</div>
    <div class="selectable-nodes grid-container">
      <div v-for="(node, idx) in selecteableNodes.standardProcesses" :key="idx">
        <div class="vue-flow__node-custom1" :draggable="true" @dragstart="onDragStart($event, node.type, node.name)">
          <div class="vue-flow-node-custom1-head">{{ node.label }}</div>
          <div class="vue-flow-node-custom1-body">{{ node.label }}</div>
        </div>
      </div>
    </div>

    <div class="tag">自定义流程</div>
    <div class="selectable-nodes grid-container">
      <div v-for="(node, idx) in selecteableNodes.customProcesses" :key="idx">
        <div class="vue-flow__node-custom2" :draggable="true" @dragstart="onDragStart($event, node.type, node.name)">
          <div class="vue-flow-node-custom2-head">{{ node.label }}</div>
          <div class="vue-flow-node-custom2-body">{{ node.label }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive } from 'vue'
import useDragAndDrop from './useDnD.js'
const { onDragStart } = useDragAndDrop()

const selecteableNodes = reactive({
  startAndEnd: [
    { type: 'custom-input', 'name': '', label: '开始' },
    { type: 'custom-output', 'name': '', label: '结束' }
  ],
  standardProcesses: [
    { type: 'custom1', 'name': 'AVG', label: 'AVG' },
    { type: 'custom1', 'name': '色谱', label: '色谱' }
  ],
  customProcesses: [
    { type: 'custom2', 'name': 'AVG', label: 'AVG' },
    { type: 'custom2', 'name': '色谱', label: '色谱' },
    { type: 'custom2', 'name': '机械臂', label: '机械臂' },
    { type: 'custom2', 'name': '其他', label: '其他' }
  ]
})

</script>

<style lang="scss">
.tag {
  display: flex;
  padding: 10px 0 0 10px;
  border-top: 1px solid #ccc;
}

.selectable-nodes {
  &>div {
    &:hover {
      cursor: grab;
    }
  }
}

.grid-container {
  padding: 10px 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  place-items: center;
  gap: 0px; /* 禁用默认间隙 */

  /* 所有单元格基础边框 */
  &>div {
    padding: 5px 0;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
   
    /* 列控制：第一列无左边框 */
    &:nth-child(odd) {
      border-left: none;
    }

    /* 列控制：第二列无右边框 */
    &:nth-child(even) {
      border-right: none;
    }

    /* 行控制：第一行无上边框 */
    &:nth-child(-n+2) {
      border-top: none;
    }

    /* 行控制：最后一行无下边框 */
    &:nth-last-child(-n+2) {
      border-bottom: none;
    }
  }
}

// 输入
.vue-flow__node-input {
  box-sizing: border-box;
  color: #000;
  background: #ccc;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-shadow: 0 0 0 1px #ccc;
  width: 50px;
  height: 25px;
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  --vf-handle: #ccc;  // handel点的颜色
  --vf-node-color: none; // 点击选中，还未拖拽时的border颜色
}
.vue-flow__node-input.selected {
  border: 1px solid #222;
  box-shadow: none;
}

// 输出
.vue-flow__node-output {
  box-sizing: border-box;
  color: #fff;
  background: #222;
  border: 1px solid #222;
  border-radius: 5px;
  box-shadow: 0 0 0 1px #ccc;
  width: 50px;
  height: 25px;
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  --vf-handle: #222;
  --vf-node-color: none;
}
.vue-flow__node-output.selected {
  border: 1px solid #aaa;
  box-shadow: none;
}

// 默认
.vue-flow__node-default {
  box-sizing: border-box;
  color: #ffffff;
  background: #2068d4;
  border: 1px solid #2068d4;
  border-radius: 5px;
  box-shadow: 0 0 0 1px #ccc;
  width: 80px !important;
  height: 40px !important;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  --vf-handle: #0000ff;
  --vf-node-color: none;
}
.vue-flow__node-default.selected {
  border: 1px solid #0000ff;
  box-shadow: none;
}

</style>